<route lang="json5" type="page">
{
  layout: 'default',
  style: {
    navigationBarTitleText: '上传历史',
  },
}
</route>

<template>
  <view class="page-container flex-col h-100vh">
    <z-paging
      ref="paging"
      v-model="dataList"
      @query="queryList"
      :paging-style="{ background: '#F2F3F7' }"
      show-refresher-update-time
      :loading-more-enabled="true"
      :auto-clean-list-when-reload="false"
      :auto-scroll-to-top-when-reload="false"
      :auto-show-system-loading="true"
    >
      <template #top>
        <view class="time-filter">
          <wd-drop-menu>
            <wd-drop-menu-item v-model="value1" :options="option1" @change="handleChange1" />
            <wd-drop-menu-item v-model="value2" :options="option2" @change="handleChange2" />
          </wd-drop-menu>
        </view>
      </template>

      <view
        v-for="(item, index) in dataList"
        :key="index"
        class="bg-white mt-20rpx mx-30rpx py-30rpx px-30rpx rounded-16rpx"
      >
        <view class="flex items-center pos-relative">
          <view class="text-#212934 text-28rpx font-bold">项王三期大门口</view>
          <view class="flex items-center pos-absolute right-20rpx">
            <view
              :class="[index === 1 ? 'bg-active' : 'bg-normal']"
              class="w-64rpx h-44rpx flex items-center justify-center mr-10rpx"
            >
              <image
                class="w-24rpx h-24rpx"
                :src="
                  index === 1
                    ? '/static/images/ic_echarging.png'
                    : '/static/images/ic_echarg_normal.png'
                "
                mode="scaleToFill"
              />
            </view>

            <view
              :class="[index === 1 ? 'bg-active' : 'bg-normal']"
              class="w-64rpx h-44rpx flex items-center justify-center"
            >
              <image
                class="w-24rpx h-24rpx"
                :src="
                  index === 1
                    ? '/static/images/ic_wifi_active.png'
                    : '/static/images/ic_wifi_normal.png'
                "
                mode="scaleToFill"
              />
            </view>
          </view>
        </view>

        <view class="bg-#E1E1E1 h-2rpx mt-28rpx"></view>

        <view class="mt-30rpx text-#6D7375 text-24rpx">
          {{ `点位位置：泗阳县淮海路与桃源路交叉口大润发对面` }}
        </view>

        <view class="mt-20rpx text-#6D7375 text-24rpx">
          {{ `设备类型：球机摄像头/XX摄像头` }}
        </view>

        <view class="mt-20rpx text-#6D7375 text-24rpx">
          {{ `添加时间：2025-10-02 12:09` }}
        </view>

        <view class="flex mt-34rpx justify-end gap-10rpx">
          <view
            class="bg-#F0F0F0 rd-8rpx w-148rpx h-56rpx text-#323433 text-24rpx flex items-center justify-center"
          >
            删除
          </view>

          <view
            class="bg-#F0F0F0 rd-8rpx w-148rpx h-56rpx text-#323433 text-24rpx flex items-center justify-center"
            @click="jumpDetail"
          >
            查看
          </view>

          <view
            class="bg-edit w-148rpx h-56rpx text-#377BF4 text-24rpx flex items-center justify-center"
          >
            编辑
          </view>
        </view>
      </view>
    </z-paging>
  </view>
</template>

<script lang="ts" setup>
const value1 = ref<string>('all')
const value2 = ref<string>('all')
const dataList = ref([])
const paging = ref(null)
const option1 = ref<Record<string, any>[]>([
  { label: '全部添加时间', value: 'all' },
  { label: '按季度', value: 'quarter' },
])

const option2 = ref<Record<string, any>[]>([
  { label: '全部设备类型', value: 'all' },
  { label: '按季度', value: 'quarter' },
])

const queryList = (pageNo, pageSize) => {
  //   getDataList(pageSize, pageNo, value1.value)
  //     .then((res) => {
  //       console.log('res', res.data.records)
  //       paging.value.complete(res.data.records)
  //     })
  //     .catch(() => {
  //       paging.value.complete()
  //     })
  for (let i = 0; i < 10; i++) {
    dataList.value.push({
      title: '测试' + i,
    })
    paging.value.complete(dataList.value)
  }
}

function handleChange1({ value }) {
  console.log('handleChange1' + value)
  paging.value.reload()
}

function handleChange2({ value }) {
  console.log('handleChange2' + value)
  paging.value.reload()
}

function jumpDetail() {
  uni.navigateTo({
    url: '/pages/detail/index',
  })
}
</script>

<style lang="scss" scoped>
//

.page-container {
  padding: 30rpx;
  background-color: #f2f3f7;
}

.bg-edit {
  border-radius: 8rpx;
  border: 2rpx solid #377bf4;
}
</style>
